---
layout: default.hbs
subject: Components Guide
---
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table class="main">
  <tr>
    <td class="wrapper">
      <table>
        <tr>
          <td>
            <h1 class="align-center">Component Guide</h1>
            <p>Hi there,</p>
            <p>
              Here's a quick guide to some of the built in components.<br />
              Each component has it's own <code>partials/components/&lt;component_name&gt;.hbs</code> file and a corresponding <code>_&lt;component_name&gt;.scss</code> 
            </p>

            {{> divider }}
            
            <!-- BEGIN DIVIDERS -->
            <h2>Dividers</h2>
            <p>
              <code>&#123;&#123;&gt; divider &#125;&#125;</code>
            </p>
            {{> divider }}
            
            <!-- BEGIN NOTICES -->
            <h2>Notices</h2>
            <p>
              <code>&#123;&#123;&gt; notice type='info' text='Your Text Here' &#125;&#125;</code>
            </p>
            {{> notice type='info' text='Hello, this is a <strong>info</strong> notice.' }}
            {{> notice type='success' text='Hello, this is a <strong>success</strong> notice.' }}
            {{> notice type='warning' text='Hello, this is a <strong>warning</strong> notice.' }}
            {{> notice type='danger' text='Hello, this is a <strong>danger</strong> notice.' }}
            
            {{> divider }}
            
            <!-- BEGIN BUTTONS -->
            <h2>Buttons</h2>
            <p>
              <code>&#123;&#123;&gt; button type='primary' url='Absolute URL' title='Button Text Here' &#125;&#125;</code>
            </p>
            {{> button type='primary' url='https://github.com/leemunroe/grunt-email-workflow' title='Button (primary)' }}
            {{> button type='secondary' url='https://github.com/leemunroe/grunt-email-workflow' title='Button (secondary)' }}

            {{> divider }}

            <!-- BEGIN CHARTS -->
            <h2>Charts (<a href="https://image-charts.com/documentation">documentation</a>)</h2>
            <p>
              <code>&#123;&#123;&gt; chart width='534' height='200' params='cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0,0.0,0.0&chxt=x,y&chxl=0:|0|1|2|3|4|5|1:|0|50|100&chg=20,50' alt='beautiful chart' &#125;&#125;</code>
            </p>
            {{> chart width='534' height='200' params='cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0,0.0,0.0&chxt=x,y&chxl=0:|0|1|2|3|4|5|1:|0|50|100&chg=20,50' alt='beautiful chart' }}

            {{> divider }}

            <p>Feel free to use, copy, modify this email template as you wish.</p>
            <p>Thanks, have a lovely day.</p>
            <p>{{> follow_lee }}</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<div class="footer">
  <table>
    <tr>
      <td class="align-center">
        <p>Don't like these annoying emails? <a href="{{ default.unsubscribe_url }}"><unsubscribe>Unsubscribe</unsubscribe></a>.</p>
      </td>
    </tr>
  </table>
</div>
